<template>
  <div :style="styleOptions" class="scroll-wrap">
    <el-scrollbar>
      <slot></slot>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name:'scrollbar',
  props:{
    propStyleOptions:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data(){
    return {
      defaultStyleOptions:{
        width:'100%',
        height:'500px',
        backgroundColor:'transparent'
      },
      styleOptions:{}
    }
  },
  mounted(){
    this.styleOptions = Object.assign(this.defaultStyleOptions,this.propStyleOptions)
  },
  methods:{

  }
}
</script>
<style lang="scss" scoped>
.scroll-wrap{
  & ::v-deep{
    .el-card__body{
      padding: 0 20px 10px
    }
    .el-scrollbar{
      padding-bottom: 17px;
      height: 100%;
    }
    .el-scrollbar__wrap{
      overflow: scroll;
      overflow-x:auto
    }
    .el-scrollbar__bar{
      z-index: 9;
    }
  }
}

</style>